/*Ext.require('Ext.container.Viewport');
Ext.require('Ext.container.Container');
Ext.require('Ext.window.Window');
Ext.require('Ext.form.Panel');
Ext.require('Ext.toolbar.Toolbar');
Ext.require('Ext.data.proxy.LocalStorage');
Ext.require('Ext.layout.container.Accordion');
Ext.require('Ext.layout.container.Border');
Ext.require('Ext.layout.container.Absolute');
Ext.require('Ext.dd.DD');
Ext.require('Ext');
Ext.require('Ext.draw.Surface');
*/
Ext.require(['*']);

Ext.application({
    name: 'pm',
    appFolder: 'pm',
    controllers: [
        'Personal'
    ],
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: {
                type: 'border',
                padding: 5
            },
            defaults: {
                split: true
            },
            items: [
                /*{
                    region: 'north',
                    height: 100,
                    split: true,
                    collapsible: true,
                    title: 'Splitter above me',
                    minHeight: 60,
                    html: 'center south',
                },*/
                {
                    xtype: 'tabpanel',

                    region: 'west',
                    width: '40%',
                    split: true,

                    items: [
                        {
                            xtype: 'panel',
                            title: 'Users',
                            layout: {
                                type: 'border',
                                padding: 0
                            },

                            items: [
                                {
                                    xtype: 'PersonalFilter',
                                    region: 'north'
                                },
                                {
                                    xtype: 'PersonalList',
                                    region: 'center',
                                    border: false
                                },
                            ]
                        },
                        {
                            xtype: 'ProjectsList',
                            title: 'Projects',
                        },
                        {
                            xtype: 'PersonalTree',
                            title: 'Users',
                            html : 'List of users will go here',
                        },
                        {
                            xtype: 'PersonalEdit',
                            title: 'User profile'
                        },
                        {
                            xtype: 'ProjectEdit',
                            title: 'Project'
                        },
                    ],
                },
                {
                    xtype: 'tabpanel',

                    region: 'center',
                    split: true,

                    items: [
                        {
                            xtype: 'panel',
                            title: 'Users',
                            layout: {
                                type: 'border',
                                padding: 0
                            },

                            items: [
                                {
                                    xtype: 'PersonalFilter',
                                    region: 'north'
                                },
                                {
                                    xtype: 'PersonalList',
                                    region: 'center',
                                    border: false
                                },
                            ]
                        },
                        {
                            xtype: 'ProjectsList',
                            title: 'Projects',
                        },
                        {
                            xtype: 'PersonalTree',
                            title: 'Users',
                            html : 'List of users will go here',
                        },
                        {
                            xtype: 'PersonalEdit',
                            title: 'User profile'
                        },
                        {
                            xtype: 'ProjectEdit',
                            title: 'Project'
                        },
                    ],
                },
            ]
        });

       /*
        var myData = [
            { name : "Record 0", column1 : "0", column2 : "0" },
            { name : "Record 1", column1 : "1", column2 : "1" },
            { name : "Record 2", column1 : "2", column2 : "2" },
            { name : "Record 3", column1 : "3", column2 : "3" },
            { name : "Record 4", column1 : "4", column2 : "4" },
            { name : "Record 5", column1 : "5", column2 : "5" },
            { name : "Record 6", column1 : "6", column2 : "6" },
            { name : "Record 7", column1 : "7", column2 : "7" },
            { name : "Record 8", column1 : "8", column2 : "8" },
            { name : "Record 9", column1 : "9", column2 : "9" }
        ];
    
        // Generic fields array to use in both store defs.
        Ext.define('DataObject', {
            extend: 'Ext.data.Model',
            fields: [
                {name: 'name', mapping : 'name'},
                {name: 'column1', mapping : 'column1'},
                {name: 'column2', mapping : 'column2'}
            ]
        });
    
        // create the data store
        var gridStore = Ext.create('Ext.data.Store', {
            model  : 'DataObject',
            data   : myData
        });
    
        // Column Model shortcut array
        var columns = [
            { id : 'name',      flex:  1,  header: "Record Name", sortable: true, dataIndex: 'name'},
            {header: "column1", width: 50, sortable: true, dataIndex: 'column1'},
            {header: "column2", width: 50, sortable: true, dataIndex: 'column2'}
        ];
    
        // declare the source Grid
        var grid = Ext.create('Ext.grid.Panel', {
            viewConfig: {
                plugins: {
                    ddGroup: 'GridExample',
                    ptype: 'gridviewdragdrop',
                    enableDrop: false
                }
            },
            store            : gridStore,
            columns          : columns,
            enableDragDrop   : true,
            stripeRows       : true,
            width            : 325,
            margins          : '0 2 0 0',
            region           : 'west',
            title            : 'Data Grid',
            selModel         : Ext.create('Ext.selection.RowModel', {singleSelect : true})
        });
    
        // Declare the text fields.  This could have been done inline, is easier to read
        // for folks learning :)
        var textField1 = Ext.create('Ext.form.field.Text', {
            fieldLabel : 'Record Name',
            name       : 'name'
        });
    
        var textField2 = Ext.create('Ext.form.field.Text', {
            fieldLabel : 'Column 1',
            name       : 'column1'
        });
    
        var textField3 = Ext.create('Ext.form.field.Text', {
            fieldLabel : 'Column 2',
            name       : 'column2'
        });
    
        // Setup the form panel
        var formPanel = Ext.create('Ext.form.Panel', {
            region     : 'center',
            title      : 'Generic Form Panel',
            bodyStyle  : 'padding: 10px; background-color: #DFE8F6',
            labelWidth : 100,
            margins    : '0 0 0 3',
            items      : [
                textField1,
                textField2,
                textField3
            ]
        });
    
        //Simple 'border layout' panel to house both grids
        var displayPanel = Ext.create('Ext.Panel', {
            width    : 650,
            height   : 300,
            layout   : 'border',
            renderTo : 'panel',
            bodyPadding: 5,
            items    : [
                grid,
                formPanel
            ],
            bbar    : [
                '->', // Fill
                {
                    text    : 'Reset Example',
                    handler : function() {
                        //refresh source grid
                        gridStore.loadData(myData);
                        formPanel.getForm().reset();
                    }
                }
            ]
        });
    
        //* Setup Drop Targets
    
        // This will make sure we only drop to the view container
        var formPanelDropTargetEl =  formPanel.body.dom;
    
        var formPanelDropTarget = Ext.create('Ext.dd.DropTarget', formPanelDropTargetEl, {
            ddGroup: 'GridExample',
            notifyEnter: function(ddSource, e, data) {
    
                //Add some flare to invite drop.
                formPanel.body.stopAnimation();
                formPanel.body.highlight();
            },
            notifyDrop  : function(ddSource, e, data){
    
                // Reference the record (single selection) for readability
                var selectedRecord = ddSource.dragData.records[0];
    
                // Load the record into the form
                formPanel.getForm().loadRecord(selectedRecord);
    
                // Delete record from the source store.  not really required.
                ddSource.view.store.remove(selectedRecord);
    
                return true;
            }
        });
*/
    }
});

